<template>
  <div class="pd">
    <el-card class="relative">

      <template>
        <el-button type="primary" size="small" class="absolute" @click="$refs.popUpLink.dialogisShow = true">新增</el-button>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 文字链接 -->
          <el-tab-pane label="文字链接" name="first">
            <hypertextTink ref="hypertextTink" :list="list" @getlinkListApi="getlinkListApi" />
          </el-tab-pane>
          <!-- 文字链接 -->
          <!-- 图片链接 -->
          <el-tab-pane label="图片链接" name="second">
            <ImgLink ref="ImgLink" :list="list" @getlinkListApi="getlinkListApi" />
          </el-tab-pane>
          <!-- 图片链接 -->
        </el-tabs>
      </template>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="page.limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleSizeChange"
      />
      <!-- 弹框 -->
      <popUpLink ref="popUpLink" @getlinkListApi="getlinkListApi" />
    </el-card>

  </div>
</template>

<script>
import hypertextTink from '@/views/adv/components/hypertextTink.vue'
import { getlinkListApi } from '@/api/adv_link'
import ImgLink from '@/views/adv/components/ImgLink.vue'
import popUpLink from '@/views/adv/components/popUpLink.vue'
export default {
  name: 'Linkimg',
  components: {
    hypertextTink,
    ImgLink,
    popUpLink
  },
  data() {
    return {
      total: 1,
      list: [], // 渲染文字列表
      activeName: 'first',
      page: {
        type: 1, // type为1是请求文字链接，为2是请求图片链接
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getlinkListApi()
  },
  methods: {
    // 获取渲染列表
    async getlinkListApi() {
      const res = await getlinkListApi(this.page)
      this.total = res.count
      this.list = res.data
    },
    // 列表切换
    async handleClick(node) {
      if (node._props.label === '图片链接') {
        this.page.type = 2
        this.getlinkListApi()
        this.handleSizeChange()
        this.page.page = 1
      } else {
        this.page.type = 1
        this.getlinkListApi()
        this.handleSizeChange()
      }
    },
    // 分页
    async  handleSizeChange(value) {
      this.page.page = value
      const res = await getlinkListApi(this.page)
      this.list = res.data
    }

  }
}
</script>

<style>
.relative{
  position: relative;
}
.absolute{
  z-index: 100;
  position: absolute;
  top: 20px;
  right: 19px;
}
</style>
